<template>
  <div class="container">
    <!-- 搜索 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <!-- <el-form-item label="日志标题">
        <el-input v-model="pageBean.params.logTitle" placeholder="日志标题" />
      </el-form-item> -->
      <el-form-item label="URL">
        <el-input v-model="pageBean.params.logUrl" placeholder="URL" />
      </el-form-item>
      <el-form-item label="请求状态">
        <el-input v-model="pageBean.params.logStatus" placeholder="请求状态" />
      </el-form-item>
      <el-form-item label="IP">
        <el-input v-model="pageBean.params.logIp" placeholder="IP" />
      </el-form-item>
      <!-- <el-form-item label="创建时间">
        <el-input v-model="pageBean.params.logTitle" placeholder="博客标题" />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="findLogByPage">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 分割线 -->
    <!-- <el-divider /> -->
    <!-- 批量删除 -->
    <el-button type="danger" size="small" class="add-button" @click="deleteByIds()">批量删除</el-button>
    <!-- 列表 -->
    <el-table tooltip-effect="dark" :data="pageBean.list" border style="width: 100%" @sort-change="changeSort" @selection-change="handleSelectionChange">
      <!-- 复选框 -->
      <el-table-column type="selection" width="55" />
      <el-table-column prop="logId" label="ID" width="50" />
      <!-- <el-table-column prop="logId" label="ID" width="100" show-overflow-tooltip /> -->
      <el-table-column prop="logUrl" label="URL" sortable="custom" width="150" />
      <!-- <el-table-column prop="logContent" label="内容" /> -->
      <el-table-column prop="logParams" label="请求参数" width="150" sortable="custom" show-overflow-tooltip />>
      <el-table-column prop="logStatus" label="状态" width="80" sortable="custom" />
      <el-table-column prop="logMessage" label="信息" width="80" sortable="custom" />
      <el-table-column prop="logMethod" label="请求方法" width="120" sortable="custom" />
      <el-table-column prop="logTime" label="响应时间" width="100" />
      <el-table-column prop="logResult" label="返回结果" sortable="custom" width="150" show-overflow-tooltip />
      <el-table-column prop="logIp" label="IP" sortable="custom" width="120" />
      <el-table-column prop="createdTime" label="创建时间" width="100" show-overflow-tooltip />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="deletelog(scope.row.logId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block fenye">
      <!-- <span class="demonstration">完整功能</span> -->
      <el-pagination
        background
        :current-page="pageBean.pageNumber"
        :page-sizes="[10, 20, 50, 80]"
        配置每页显示几条
        :page-size="pageBean.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBean.totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 分页 end-->
  </div>
</template>
<script>
import logApi from '@/api/log'
export default {
  data() {
    return {
      pageBean: {
        pageNumber: 1, // 当前页
        pageSize: 10, // 每个显示条数
        totalPage: 0, // 总页数
        totalCount: 0, // 总条数
        params: {}, // 默认查询参数对象
        list: [],
        sortColumn: 'created_time', // 排序列
        sortMethods: 'asc'
      },
      selectLogs: [], // 批量删除选中的日志
      log: {
        logId: 0,
        logUrl: null,
        logParams: null,
        logStatus: 0,
        logMessage: null,
        logMethod: null,
        logTime: 0,
        logResult: null,
        logIp: null,
        createdTime: null,
        createdBy: null
      }
    }
  },
  created() {
    // 初始化 分页查询
    this.findLogByPage()
  },
  methods: {
    findLogByPage() {
      // 分页查询日志
      logApi.findByPage(this.pageBean).then(response => {
        // console.log(response.data)
        this.pageBean = response.data
      })
    },
    handleSizeChange(val) {
      // 分页显示每页多少条 触发
      this.pageBean.pageSize = val
      this.findLogByPage()
      // console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      // 当前页触发
      this.pageBean.pageNumber = val
      this.findLogByPage()
      // console.log(`当前页: ${val}`)
    },
    deletelog(id) {
      // 删除日志
      this.$confirm('此操作将永久删除！, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        logApi.deleteById(id).then(response => {
          this.$message.success(response.msg)
          // 删除成功 刷新日志列表
          this.findLogByPage()
        })
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleSelectionChange(val) {
      this.selectLogs = val
      // console.log(val)
    },
    deleteByIds(ids) {
      // 批量删除日志
      const logIds = []
      this.selectLogs.forEach(e => {
        logIds.push(e.logId)
      })
      console.log(logIds)
      logApi.deleteByIds(logIds).then(response => {
        this.$message.success(response.msg)
        // 删除成功 刷新日志列表
        this.findLogByPage()
      })
    }
  }
}
</script>
